//圆角 环形图
const opt_pie_raidus = (title, d1, d2) => {
	var dat = d1 || {
			value: 735,
			name: 'b'
		},
		dat2 = d2 || {
			value: 1048,
			name: 'a'
		};
	dat['itemStyle'] = {
		color: "#91CC75",
	}
	dat2['itemStyle'] = {
		color: "#5470C6",
	}
	var option = {
		tooltip: {
			trigger: 'item'
		},
		legend: {
			show: false,
		},
		title: {
			text: '主标题',
			subtext: '子标题',
			left: 'middle',
			top: 'middle',
			textAlign: "center",
			show: false,
		},
		series: [{
			name: title,
			type: 'pie',
			radius: ['50%', '70%'],
			avoidLabelOverlap: false,
			itemStyle: {
				borderRadius: 5,
				borderColor: '#fff',
				borderWidth: 0
			},
			label: {
				show: false,
				position: 'center'
			},
			emphasis: {
				label: {
					show: false,
					fontSize: '40',
					fontWeight: 'bold'
				}
			},
			labelLine: {
				show: false
			},
			data: [dat, dat2]
		}]
	};
	return {
		...option
	};
}

const opt_pie1 = (v1, v2, myChart) => {
	let d1 = hData(v1, '在线设备', '#3aa9d9'),
		d2 = hData(v2, '离线设备', '#7fd1e3');
	var option = {
		tooltip: {
			trigger: 'item',
			formatter: '{a} <br/>{b}: {c} <br/> ({d}%)'
		},
		series: [{
			name: '设备信息',
			type: 'pie',
			radius: '65%' /*扇*/ , //['50%', '65%']/*环*/,
			labelLine: {
				length: 15,
				length2: 50,
				maxSurfaceAngle: 100
			},
			label: {
				formatter: '{a| {c}}   \n {b|{b}}   ',
				align: 'center',
				edgeDistance: 0,
				lineHeight: 0,
				//formatter: ' {per|{d}%}  \n{hr|}\n {b|{b}：}{c}   ',
				//formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
				//backgroundColor: '#F6F8FC',
				//borderColor: '#8C8D8E',
				//borderWidth: 3,
				//borderRadius: 4,
				rich: {
					a: {
						color: '#eee',
						lineHeight: 35,
						align: 'center'
					},
					hr: {
						borderColor: '#5EB6C7',
						width: '100%',
						borderWidth: 1,
						height: 0
					},
					b: {
						padding: [6, 8],
						color: '#eee',
						fontSize: 14,
						fontWeight: 'bold',
						lineHeight: 20
					},
					per: {
						color: '#eee',
						//backgroundColor: '#4C5058',
						padding: [3, 4],
						borderRadius: 4,
						align: 'center',
					}
				}
			},

			labelLayout: function(params) {
				const isLeft = params.labelRect.x < myChart.getWidth() / 2;
				const points = params.labelLinePoints;
				// Update the end point.
				points[2][0] = isLeft ?
					params.labelRect.x :
					params.labelRect.x + params.labelRect.width;
				return {
					labelLinePoints: points
				};
			},
			data: [d1,
				d2,
			]
		}]
	};
	return option;
}
/**饼图子项
 * v:值，
 * n:名称
 * c:颜色
 * bw:边框宽度
 * bc:边框颜色
 */
const hPieData = (v, n, c, bw, bc, lab) => {
	let data = {
		value: v,
		name: n,
		itemStyle: {
			color: c,
			borderWidth: bw || 1,
			borderColor: bc || c
		},
		label: {
			show: true,
			color: c,
		}
	};
	if (lab && lab.show) {
		data['label'] = {
			color: '#eee',
			show: true,
			position: 'center',
			fontSize: '14px',
			align: 'center',
			formatter: (lab.tcolor ? ('{stl2|' + lab.text + '}') : lab.text) + '{stl|{d}%}',
			lineHeight: '16',
			rich: {
				stl: {
					fontSize: "16",
					padding: [0, 0, 0, 3],
					fontWeight: 'bold',
					color: lab.color
				},
				...(lab.tcolor ? {
					stl2: {
						color: lab.tcolor,
						fontWeight: 'bold',
					}
				} : {})
			}
		};
		data['labelLine'] = {
			lineStyle: {
				width: 2
			}
		}

	} else {

	}
	return data;


}
/**饼图
 * hPie({dom:dom:ecdats:[hPieItem]})
 */
const hPie = ({
	dom,
	fontColor,
	size,
	data,
	echarts,
	labelShow,
	title,
	dc,
}) => {
	let c = dc || echarts.init(dom);
	let s = size || '65%';

	let label = {
		label: {},
		labelLine: {
			show: true
		}
	};
	if (labelShow) {
		label = {
			label: {
				show: labelShow,
				//align: 'left',
				edgeDistance: 0,
				padding: [30, -10, 30, -20],
				//lineHeight: 0,
				formatter: ' {stl|{d}%({c}台)}\n\n{stl2|{b}}',
				rich: {
					stl: {
						//width:'100%',
						//color: 'red',
						//align: 'right',
						fontSize: "16",
						padding: [0, 0, 0, 3],
						fontWeight: 'bold',
					},
					stl2: {
						fontWeight: 'bold',
						fontSize: "14",
						align: 'center',
						//padding: [6, 8],
						//color: '#eee',
						//align: 'left'
					}
				}
			},
			labelLine: {
				length: 15,
				length2: 50,
				maxSurfaceAngle: 100
			},
			labelLayout: function(params) {
				const isLeft = params.labelRect.x < c.getWidth() / 2;
				const points = params.labelLinePoints;
				// Update the end point.				
				points[2][0] = isLeft ?
					params.labelRect.x :
					params.labelRect.x + params.labelRect.width;
				return {
					labelLinePoints: points
				};
			}
		}
		if (fontColor) {
			label.label.rich.stl2['color'] = fontColor;
		}
	}

	var option = {
		tooltip: {
			trigger: 'item',
			position: function(pos, params, dom, rect, size) {
				// 鼠标在左侧时 tooltip 显示到右侧，鼠标在右侧时 tooltip 显示到左侧。
				var obj = {
					top: 60
				};
				obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;
				return obj;
			},
			formatter: '{a} <br/>{b}: {c} <br/> ({d}%)'
		},
		series: [{
			name: title || '信息',
			type: 'pie',
			radius: size /*扇*/ , //['50%', '65%']/*环*/,
			itemStyle: {
				borderColor: '#fff',
				borderWidth: 1
			},
			...label,
			data: [...data]
		}]
	};
	//console.log(dom, option);


	c.setOption(option);
	return c;
}

//#4BF3F9 #66AAAC
//#AB88FF #B1A6CE
//#FFCB00 #B09F60
//#05FFC7 #63AE9D
const opt_gauge_a = (c, cbg, tit, v) => {
	c = c || '#4BF3F9';
	cbg = cbg || '#66AAAC';
	tit = tit || '测试';
	var center = ['55%', '50%'];
	var radius = '70%';

	//外环宽度
	var rwidth = 10;

	var option = {
		series: [
			//填充--中间文字
			{
				type: 'gauge',
				center: center,
				startAngle: 210,
				endAngle: -30,
				min: 0,
				max: 100,
				splitNumber: 12,
				itemStyle: {
					color: c,
					shadowBlur: 6,
					shadowColor: c
				},
				progress: {
					show: true,
					width: rwidth
				},
				pointer: {
					show: false
				},
				axisLine: {
					lineStyle: {
						width: 10,
						color: [
							[1, cbg]
						]
					}
				},
				axisTick: {
					show: false,
				},
				splitLine: {
					show: false,
				},
				axisLabel: {
					show: false,
				},
				anchor: {
					show: false
				},
				title: {
					show: false
				},
				detail: {
					valueAnimation: true,
					width: '60%',
					lineHeight: 40,
					borderRadius: 8,
					offsetCenter: [0, '-5%'],
					fontSize: 18,
					fontWeight: 'bolder',
					formatter: '{value} %',
					color: '#eee'
				},
				data: [{
					value: v || 20
				}]
			},

			//内部-底部标题
			{
				type: 'gauge',
				center: center,
				radius: '55%',
				startAngle: 210,
				endAngle: -30,
				min: 0,
				max: 100,
				itemStyle: {
					color: c
				},
				progress: {
					show: true,
					width: 3
				},
				pointer: {
					show: false
				},
				axisLine: {
					show: false
				},
				axisTick: {
					show: false
				},
				splitLine: {
					show: false
				},
				axisLabel: {
					show: false
				},
				detail: {
					valueAnimation: true,
					width: '60%',
					lineHeight: 40,
					borderRadius: 8,
					fontSize: 12,
					offsetCenter: [0, '80%'],
					fontWeight: 'bolder',
					formatter: tit,
					color: '#fff'
				},
				data: [{
					value: 100
				}]
			}
		]
	};

	return option;
}

const opt_category_1 = (rc, dat) => {
	var option = {
		tooltip: {
			show: true,
			formatter: '{b}年 {c}万元'
		},
		grid: {
			top: 50,
			bottom: 30,
			left: 10,
			right: 50,
			containLabel: true,
		},
		xAxis: {
			type: 'category',
			data: rc,
			name: ' 年 ',
			nameTextStyle: {
				verticalAlign: 'top'
			},
			axisLine: {
				show: false,
				lineStyle: {
					color: '#fff'
				}
			},
			//刻度对齐
			//boundaryGap: true,
			axisTick: {
				alignWithLabel: true,
				show: false,
			},
		},
		yAxis: {
			type: 'value',
			name: ' 万元 ',
			nameTextStyle: {
				align: 'right'
			},
			axisLine: {
				lineStyle: {
					color: '#fff'
				}
			},
			splitLine: {
				lineStyle: {
					color: ['#535353']
				}
			}
		},
		series: [{
			type: 'bar',
			barWidth: 10,
			itemStyle: {
				color: {
					type: 'linear',
					y2: 1,
					colorStops: [{
							offset: 0,
							color: '#FFF5E7' // 0% 处的颜色
						},
						{
							offset: 1,
							color: '#FFA024 ' // 100% 处的颜色
						}
					]
				},
				borderRadius: [100, 100, 100, 100]
			},
			data: dat,
		}]
	};

	return option;
}

const opt_vmap_a = () => {
	var option = {
		// backgroundColor: '#2c343c',
		title: {
			text: '',
			left: 'center',
			top: 20,
			textStyle: {
				color: '#ccc'
			}
		},
		tooltip: {
			trigger: 'item',
			formatter: '{b} <br/> {c} {d}%',
		},
		visualMap: {
			show: false,
			min: 60,
			max: 100,
			inRange: {
				colorLightness: [0, 1]
			}
		},
		series: [{
			name: 'Access From',
			type: 'pie',
			radius: [20, 80],
			center: ['50%', '50%'],
			data: [{
					value: 300,
					name: '45-60天',
					itemStyle: {
						color: '#FEB63F'
					}
				},
				{
					value: 100,
					name: '30天内',
					itemStyle: {
						color: '#40EEBA'
					}
				},
				{
					value: 130,
					name: '30-45天',
					itemStyle: {
						color: '#3699FE'
					}
				},
				{
					value: 235,
					name: '60天外',
					itemStyle: {
						color: '#FF7D7B'
					}
				},
			].sort(function(a, b) {
				return a.value - b.value;
			}),
			roseType: 'radius',
			label: {
				color: 'rgba(255, 255, 255, 0.6)',
				formatter: function(a) {
					var txt = "{a|" + a.name + "}\n{b|" + a.percent + "%}";
					//a.name+a.percent a+'{b} \n{d}%'
					return txt;
				},
				rich: {
					a: {
						color: "#eee",
						lineHeight: 35,
						align: 'center'
					},
					b: {
						fontSize: 14,
					}
				}
			},
			labelLine: {

				smooth: 0.2,
				length: 10,
				length2: 20
			},
			itemStyle: {
				color: '#c23531',
				shadowBlur: 200,
				shadowColor: 'rgba(0, 0, 0, 0.5)'
			},
			animationType: 'scale',
			animationEasing: 'elasticOut',
			animationDelay: function(idx) {
				return Math.random() * 200;
			}
		}]
	};
	return option;
}
/**
 * 
	import * as echarts from 'echarts'
	
	
 * 
 */

export default {
	opt_pie1,
	opt_pie_raidus,
	hPieData,
	hPie,
	opt_gauge_a,
	opt_category_1,
	opt_vmap_a
}

export function hBar(n, c, d, w) {
	return {
		name: n,
		type: 'bar',
		itemStyle: {
			borderRadius: 0,
			color: {
				type: 'linear',
				x: 0,
				y: 0,
				x2: 0,
				y2: 1,
				colorStops: [{
					offset: 0,
					color: c // 0% 处的颜色
				}, {
					offset: 1,
					color: c + "30" // 100% 处的颜色
				}],
				global: false // 缺省为 false
			},
			//  new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
			// 		offset: 0,
			// 		color: c
			// 	},
			// 	{
			// 		offset: 1,
			// 		color: c + "30"
			// 	}
			// ]),
			borderColor: c,
			borderWidth: 1,
		},
		barMaxWidth: w || 20,
		label: {
			show: false,
		},
		data: d
	}
}
export function hLine(n, c, d) {
	return {
		name: n,
		type: 'line',
		itemStyle: {
			color: c,
		},
		lineStyle: {
			color: c,
			width: 2,
		},
		label: {
			show: false,
		},
		data: d,
		smooth: false, // Set to false to make the line straight
		symbol: 'circle', // Optional: shape of the data points
		symbolSize: 8, // Optional: size of the data points
	}
}
export function hChartBar(c, xdat, legDat) {
	c = c || "#eee";
	return {
		grid: {
			top: 30,
			bottom: 40,
			right: 20,
			containLabel: true,
			left: 10
		},
		title: {
			text: '设备状态',
			left: 50,
			show: false,
			textStyle: {
				color: c,
				fontStyle: 'normal',
				fontWeight: 'bolder',
				fontSize: 14,
			}
		},
		textStyle: {
			color: c,
		},
		tooltip: {
			show: true,
			trigger: 'axis',
			axisPointer: {
				type: 'shadow'
			}
		},
		legend: {
			//	inactiveColor: '#797979',
			type: 'scroll',
			//orient: 'vertical',
			right: 20,
			top: '0',
			itemGap: 10,
			data: legDat,
			textStyle: {
				color: c,
			},
			itemHeight: 8,
			itemWidth: 16,

			itemStyle: {
				borderWidth: 1,
				borderRadius: 0,
				borderCap: "butt"
			},
		},
		xAxis: {
			type: 'category',
			boundaryGap: true,
			data: xdat,
			axisTick: {
				show: false
			},
		},
		yAxis: {
			type: 'value',
			splitLine: {
				show: true,
				lineStyle: {
					color: "#7c7c7c",
					type: [3, 4],
					width: 1,
					dashOffset: 0
				}
			}
		},
		//	series:[]
	};
}
export function hChartMixed(c, xdat, legDat, barSeries, lineSeries) {
	c = c || "#eee";
	return {
		grid: {
			top: 30,
			bottom: 40,
			right: 10,
			left: 20,
			containLabel: true,
		},
		title: {
			text: '设备状态',
			left: 50,
			show: false,
			textStyle: {
				color: c,
				fontStyle: 'normal',
				fontWeight: 'bolder',
				fontSize: 14,
			}
		},
		textStyle: {
			color: c,
		},
		tooltip: {
			show: true,
			trigger: 'axis',
			axisPointer: {
				type: 'shadow'
			}
		},
		legend: {
			type: 'scroll',
			right: 20,
			top: '0',
			itemGap: 10,
			data: legDat,
			textStyle: {
				color: c,
			},
			itemHeight: 8,
			itemWidth: 16,
			itemStyle: {
				borderWidth: 1,
				borderRadius: 0,
				borderCap: "butt"
			},
		},
		xAxis: {
			type: 'category',
			boundaryGap: true,
			data: xdat,
			axisTick: {
				show: false
			},
		},
		yAxis: {
			type: 'value',
			splitLine: {
				show: true,
				lineStyle: {
					color: "#7c7c7c",
					type: [3, 4],
					width: 1,
					dashOffset: 0
				}
			}
		},
		series: [
			...barSeries.map(series => ({
				...series,
				type: 'bar',
				barWidth: 10,
				itemStyle: {

					borderRadius: 0,
					color: {
						type: 'linear',
						x: 0,
						y: 0,
						x2: 0,
						y2: 1,
						colorStops: [{
							offset: 0,
							color: series.itemStyle.color // 0% 处的颜色
						}, {
							offset: 1,
							color: series.itemStyle.color + "30" // 100% 处的颜色
						}],
						global: false
					},
					borderColor: series.itemStyle.color,
					borderWidth: 1,
				},
				label: {
					show: false,
				},
				data: series.data
			})),
			...lineSeries.map(series => ({
				...series,
				type: 'line',
				itemStyle: {
					color: series.itemStyle.color,
				},
				lineStyle: {
					color: series.itemStyle.color,
					width: 2,
				},
				label: {
					show: false,
				},
				data: series.data,
				smooth: true,
				symbol: 'circle',
				symbolSize: 8,
			}))
		]
	};
}
export function hPieItem(n, c, v) {
	return {
		name: n,
		value: v,
		itemStyle: {
			color: c,
		},
	}
}
export function hPieSerie(n, radius, dats) {
	dats = dats || [];

	return {
		name: n || '',
		type: 'pie',
		center: ['35%', '50%'],
		radius: radius || ['50%', '65%'],
		// emphasis: {
		// 	focus: 'series'
		// },
		selectedMode: 'single',
		avoidLabelOverlap: false,
		itemStyle: {
			borderRadius: 0,
		},
		label: {
			show: false,
		},
		showEmptyCircle: true,
		emptyCircleStyle: {
			color: "#c3c3c3",
			// borderColor: "#000",
			borderWidth: 0
		},
		data: dats,
		z: 0,

	};
}
export function hChartPie(c, legDat, itemGap = 20, pos = 90, n = "", fsize = '18px') {
	return {
		title: {
			text: '设备状态',
			left: 50,
			show: false,
			textStyle: {
				color: c,
				fontStyle: 'normal',
				fontWeight: 'bolder',
				fontSize: 14,
			}
		},
		textStyle: {
			color: c,
		},
		tooltip: {
			trigger: 'item',
			formatter: '{a} <br/>{b}: {c} <br/> ({d}%)'
		},
		legend: {
			show: true,
			data: legDat,
			textStyle: {
				color: c,
			},
			// formatter:function(name){
			//         	//通过name获取到数组对象中的单个对象
			//             let singleData = data.filter(function(item){
			//                 return item.name == name
			//             })
			//             return  name + ' | ' + singleData[0].value;
			//         } 
			emphasis: {
				itemStyle: {
					shadowBlur: 10,
					shadowOffsetX: 0,
					shadowColor: 'rgba(0, 0, 0, 0.5)'
				}
			},
			inactiveColor: '#797979',
			// type: 'scroll',
			orient: 'vertical',
			right: 20,
			top: 'middle',
			left: '60%',
			itemGap: itemGap,
		},
		series: [],
		graphic: {
			type: 'text',
			left: pos,
			top: 'middle',
			style: {
				text: n,
				fontWeight: 300,
				fontSize: fsize,
				fill: '#B6D2FA',
				textAlign: 'center',
				font_family: 'PINGFANG SC',
			}
		}
	};
}

/**
 * 
 */